<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='Links',active='links'">
<header th:replace="admin/fragments/header::headerFragment(${title},${active})"></header>

<body class="fixed-left">
    <div id="wrapper">
        <div th:replace="admin/fragments/header::header-body"></div>
        <div class="content-page">
            <div class="content">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <h4 class="page-title">Link Management</h4>
                        </div>
                        <div class="col-md-12">
                            <table class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>Link Name</th>
                                        <th>Link Address</th>
                                        <th>Link LOGO</th>
                                        <th>Link Order</th>
                                        <th>Operation</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <th:block th:each="link : ${links}">
                                        <tr th:attr="mid=${link.mid}">
                                            <td th:text="${link.name}"></td>
                                            <td><a th:href="@{${link.slug}}" target="_blank" th:text="${link.slug}"></a>
                                            </td>
                                            <td><img style="height: 50px; width: 50px;" th:src="${link.description}"
                                                    alt=""></td>
                                            <td th:text="${link.sort}"></td>
                                            <td>
                                                <a href="javascript:void(0)" onclick="editLink(this);"
                                                    class="btn btn-primary btn-sm waves-effect waves-light m-b-5">
                                                    <i class="fa fa-edit"></i> <span>Edit</span>
                                                </a>
                                                <a href="javascript:void(0)" th:onclick="'delLink('+${link.mid}+');'"
                                                    class="btn btn-danger btn-sm waves-effect waves-light m-b-5">
                                                    <i class="fa fa-trash-o"></i> <span>Delete</span>
                                                </a>
                                            </td>
                                        </tr>
                                    </th:block>
                                </tbody>
                            </table>
                        </div>
                        <div class="row">
                            <div class="col-md-12" style="padding: 20px;">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Save Link</h3>
                                    </div>
                                    <div class="panel-body">

                                        <form id="linkForm" class="form-inline" role="form" novalidate="novalidate">

                                            <input type="hidden" id="mid" name="mid" />

                                            <div class="form-group">
                                                <label class="sr-only">Link Title</label>
                                                <input type="text" id="title" name="title" class="form-control"
                                                    placeholder="Title" required="required" aria-required="true" />
                                            </div>

                                            <div class="form-group">
                                                <label class="sr-only">Link URL</label>
                                                <input type="url" id="url" name="url" class="form-control"
                                                    placeholder="Link" required="required" aria-required="true" />
                                            </div>

                                            <div class="form-group">
                                                <label class="sr-only">Link LOGO</label>
                                                <input type="url" id="logo" name="logo" class="form-control"
                                                    placeholder="LOGO (Optional)" />
                                            </div>

                                            <div class="form-group">
                                                <label class="sr-only">Link Order</label>
                                                <input type="number" id="sort" name="sort" class="form-control"
                                                    value="0" />
                                            </div>

                                            <button type="submit"
                                                class="btn btn-success waves-effect waves-light m-l-10">Save
                                                Link</button>
                                        </form>
                                    </div> <!-- panel-body -->
                                </div> <!-- panel -->
                            </div> <!-- col -->

                        </div>
                    </div>
                    <div th:replace="admin/fragments/footer :: footer-content"></div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="admin/fragments/footer :: footer"></div>
    <script src="//cdn.bootcss.com/jquery-validate/1.15.1/jquery.validate.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-validate/1.15.1/localization/messages_zh.min.js"></script>
    <script type="text/javascript">
        /*<![CDATA[*/
        var tale = new $.tale();

        $('#linkForm').validate({
            submitHandler: function (form) {
                var params = $("#linkForm").serialize();
                tale.post({
                    url: '/admin/links/save',
                    data: params,
                    success: function (result) {
                        $('#linkForm input').val('');
                        $('#linkForm #sort').val('0');
                        if (result && result.code == 'success') {
                            tale.alertOkAndReload('Successful!');
                        } else {
                            tale.alertError(result.msg || 'Failed!');
                        }
                    }
                });
            }
        });

        function editLink(obj) {
            var this_ = $(obj);

            var mid = this_.parents('tr').attr('mid');
            var title = this_.parents('tr').find('td:eq(0)').text();
            var url = this_.parents('tr').find('td:eq(1)').text();
            // var logo = this_.parents('tr').find('td:eq(2)').text();
            var logo = this_.parents("tr").find("td:eq(2)").children().attr("src");
            var sort = this_.parents('tr').find('td:eq(3)').text();

            $('#linkForm #mid').val(mid);
            $('#linkForm #title').val(title);
            $('#linkForm #url').val(url);
            $('#linkForm #logo').val(logo);
            $('#linkForm #sort').val(sort);
        }

        function delLink(mid) {
            tale.alertConfirm({
                title: 'Are you sure to delete this link?',
                then: function () {
                    tale.post({
                        url: '/admin/links/delete',
                        data: { mid: mid },
                        success: function (result) {
                            if (result && result.code == 'success') {
                                tale.alertOkAndReload('Successful!');
                            } else {
                                tale.alertError(result.msg || 'Failed!');
                            }
                        }
                    });
                }
            });
        }
    /*]]>*/
    </script>
</body>

</html>